import React, { Component } from 'react'
import "./myorder.scss"
import { getApiUserOrder } from "../../axios/api"
import { get } from '../../axios/localstorage';

export default class myorder extends Component {

    state = {
        keywords:'',
        type:1,
        list:[],
        data:{
            finish:[],
            all:[],
            fail:[]
        }
    }

    componentWillMount(){
        this.getData();
    }

    componentDidMount(){
        window.scroll(0,0)
    }

    gotoSearch=()=>{
        this.getData();
    }

    getData=()=>{
        let param = {
            token:get('token'),
            keyword:this.state.keywords,
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiUserOrder(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    data,
                    list:data.all
                })
            }
        }).catch(err =>{
            console.error(err);
        })
    }

    render() {
        return (
            <div className="myorder">
                <div className="mhead">
                    <div className="title">
                        <h1>我的订单</h1>
                        <div className="right">
                            <input type="text" placeholder="搜索订单名称或单号" value={this.state.keywords} onChange={(ev)=>{this.setState({keywords:ev.target.value})}} />
                            <button onClick={()=>{this.gotoSearch()}}>搜索</button>
                        </div>
                    </div>
                    <div className="mtypes">
                        <div className={this.state.type === 1?"item active":"item"} onClick={()=>{this.setState({type:1,list:this.state.data.all})}}>
                            <h2>所有订单</h2>
                            <div className="num" hidden={this.state.data.all.length === 0}>{this.state.data.all.length}</div>
                            <div className="span"></div>
                        </div>
                        <div className={this.state.type === 2?"item active":"item"} onClick={()=>{this.setState({type:2,list:this.state.data.finish})}}>
                            <h2>支付成功</h2>
                            <div className="num" hidden={this.state.data.finish.length === 0}>{this.state.data.finish.length}</div>
                            <div className="span"></div>
                        </div>
                        <div className={this.state.type === 3?"item active":"item"} onClick={()=>{this.setState({type:3,list:this.state.data.fail})}}>
                            <h2>支付失败</h2>
                            <div className="num" hidden={this.state.data.fail.length === 0}>{this.state.data.fail.length}</div>
                            <div className="span"></div>
                        </div>
                    </div>
                </div>

                <div className="mbox">

                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                        </div>
                        <p>暂无此类订单</p>
                    </div>
                    {
                        this.state.list.map((item,index)=>{
                            return <div className="item" key={index}>
                                        <div className="img" style={{backgroundImage:"url('"+item.courses.image_text+"')"}}></div>
                                        <div className="icen">
                                            <h2>{item.courses.title}</h2>
                                            <p hidden={!item.pay_code} className="red">实付款：¥{item.payment_money}</p>
                                            <p hidden={item.pay_code}>支付失败</p>
                                        </div>
                                        <div className="right">
                                            <p>订单号：{item.order_sn}</p>
                                            <h2>支付方式：{item.type === '1'?"支付宝支付":"微信支付"}</h2>
                                            <p>下单时间：{item.create_time_text}</p>
                                        </div>
                                    </div>
                        })
                    }
                </div>
            </div>
        )
    }
}
